<!--我的中心-->
<template>
  <eui-background type="common">
    <eui-navbar ref="EuiNavBar" title="我的动态" rightIcon="" displayable="true" />
    <view class="user-view">
      <view class="user-top">
        <image :src="personImg" @error="setErrorImg" mode="scaleToFill" style="width: 120rpx;height: 120rpx;border-radius: 50%;border: 2rpx solid #FFFFFF;margin-right: 24rpx" />
        <view>
          <text class="user-name">{{ userInfo.c_name }}</text>
          <view style="display: flex; flex-direction: row; margin-top: 12rpx;">
            <view class="user-tag">
              <text class="content-text">暂无排名</text>
              <eui-uicons type="right" size="24" color="#FFFFFF" />
            </view>
            <view class="user-tag" style="background: linear-gradient( 135deg, #B16B1F 0%, #874D16 100%);">
              <text class="content-text">荣誉勋章</text>
              <eui-uicons type="right" size="24" color="#FFFFFF" />
            </view>
          </view>
        </view>
      </view>
      <view class="user-bottom">
        <view class="role-tag">
          <text>段位</text>
          <text class="level-text">青铜</text>
          <eui-uicons type="right" size="22" color="#888888" />
        </view>
        <view class="role-tag">
          <text>等级</text>
          <text class="level-text">1</text>
          <eui-uicons type="right" size="22" color="#888888" />
        </view>
        <view class="role-tag">
          <text>任务分</text>
          <text class="level-text">80</text>
          <eui-uicons type="right" size="22" color="#888888" />
        </view>
        <view class="role-tag">
          <text>质量分</text>
          <text class="level-text">82</text>
          <eui-uicons type="right" size="22" color="#888888" />
        </view>
      </view>
    </view>
    <view class="main-view" :style="{ height: scrollHeight + 'rpx' }">
      <scroll-view scroll-y="true" style="height: 100%;">
        <eui-card title="今日统计" topMargin="0">
          <template v-slot:extra>
            <view class="extra-view" @click="goToMyCenter">
              <text class="extra-text">我的工单</text>
              <eui-uicons type="right" size="22" color="#888888" />
            </view>
          </template>
          <view class="statistics-view">
            <view class="statistics-item">
              <text class="statistics-top">{{ dailyData.c_total_tasks }}<text style="font-size: 22rpx">单</text> </text>
              <text class="statistics-bottom">今日接单</text>
            </view>
            <view class="statistics-item">
              <text class="statistics-top">{{ dailyData.c_total_completed }}<text style="font-size: 22rpx">单</text> </text>
              <text class="statistics-bottom">已完成</text>
            </view>
            <view class="statistics-item">
              <text class="statistics-top">{{ dailyData.c_total_time }}<text style="font-size: 22rpx">分钟</text> </text>
              <text class="statistics-bottom">总时长</text>
            </view>
          </view>
        </eui-card>
        <eui-card title="能力评分">
          <template v-slot:extra>
            <view class="extra-view" @click="goToAbilityRank">
              <text class="extra-text">能力排名</text>
              <eui-uicons type="right" size="22" color="#888888" />
            </view>
          </template>
          <view class="score-view">
            <view class="score-item">
              <view class="score-top">
                <text class="score-top-title">处理效率</text>
                <text class="score-top-detail" :class="[theme]">80<text style="font-size: 22rpx">分</text> </text>
              </view>
              <view class="score-bottom">
                <view class="bottom-item">
                  <text class="bottom-item-title">准时率</text>
                  <text class="bottom-item-detail">89%</text>
                </view>
                <view class="bottom-item">
                  <text class="bottom-item-title">转单率</text>
                  <text class="bottom-item-detail">5%</text>
                </view>
              </view>
            </view>
            <view class="score-line" />
            <view class="score-item">
              <view class="score-top">
                <text class="score-top-title">任务质量</text>
                <text class="score-top-detail" :class="[theme]">82<text style="font-size: 22rpx">分</text> </text>
              </view>
              <view class="score-bottom">
                <view class="bottom-item">
                  <text class="bottom-item-title">评价分</text>
                  <text class="bottom-item-detail">4.5</text>
                </view>
                <view class="bottom-item">
                  <text class="bottom-item-title">通过率</text>
                  <text class="bottom-item-detail">95%</text>
                </view>
              </view>
            </view>
          </view>
        </eui-card>
        <eui-card title="我的群组">
          <template v-slot:extra>
            <view class="extra-view" @click="goToJoinGroup">
              <text class="extra-text">加入群组</text>
              <eui-uicons type="right" size="22" color="#888888" />
            </view>
          </template>
          <view style="width: 100%; height: 15rpx;" />
          <view v-if="myGroup.length > 0" class="item-view" v-for="(item, index) in myGroup" :key="index" @click="exitGroup(item)">
            <view class="icon-view">
              <eui-uicons size='60' fontFamily="enjoyIcon5" customPrefix="icon-qunzu"
                          color="var(--theme-color)" :class="[theme]" />
            </view>
            <view class="content-view">
              <text class="title">{{ item.c_group_title }}</text>
              <text class="detail" v-if="item.c_group_content">{{ item.c_group_content }}</text>
            </view>
            <view class="right-view">
              <text style="margin-right: 10rpx">退出群组</text>
              <eui-uicons type="right" size="24" color="#888888" />
            </view>
          </view>
          <view v-else>
            <image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
            <view class="no-data-text">暂未加入任何群组</view>
          </view>
        </eui-card>
      </scroll-view>
    </view>
  </eui-background>
</template>

<script setup type="ts">
import { storeToRefs } from 'pinia';
import { computed, onMounted, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useMainStore } from "@/store/modules/store";
import { useLoginStore } from "@/store/modules/useLoginStore";
import { useThemeStore } from "@/store/themeStore";
import { getRdsUrl, rdsRequest } from "@/hooks/rdsServices";
import service from "@/common/service";
import dateRangUtil from "@/common/dateRangUtil";
import PartRefund from "@/pages/BcmViews/PickingOrder/partRefund.vue";
import useService from "@/hooks/useService";

const mainStore = useMainStore();
const LoginStore = useLoginStore();
const { loginInfo } = mainStore;
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const rdsUrl = getRdsUrl();
const mainService = useService({ prefix: "mainApi" });
const scrollHeight = ref(300);
// 用户信息
const userInfo = ref({});
const imgUrl = LoginStore.EnjoyMain.replace('/Enjoy/Service', '');
const personImg = ref(imgUrl + '/File/DownLoadImage/' + loginInfo.sUser);
const setErrorImg = () =>{
  personImg.value = userInfo.value.c_sex == '男' || userInfo.value.c_sex == 'M' ? '/static/img/avatar_male.png' : '/static/img/avatar_male.png';
}
// 今日统计
const dailyData = ref({
  c_total_tasks: 0,
  c_total_completed: 0,
  c_total_time: 0,
});
// 我的群组
const allGroup = ref([]);
const userRole = ref([]);
const myGroup = ref([]);
const canJoinGroup = ref([]);

// 获取列表高度
const getListHeight = async () => {
  await uni.getSystemInfo({
    success: function (res) {
      let info = uni.createSelectorQuery().select(".main-view");
      info.boundingClientRect(function (data) {
        //获取列表高度
        let height = res.windowHeight - data.top;
        //转换rpx
        scrollHeight.value = height / (res.windowWidth / 750) - 20;
      }).exec()
    }
  });
};

const GetMyInfoList = async () => {
  service.enjoyShowLoading('正在加载...');
  let request = {
    url: LoginStore.EnjoyMain,
    data: {
      UniqueKey: "管易通40主页",
      ObjectData: loginInfo.sUser,
      MethodName: "GetMyInfoList",
    },
  }
  service.request(request, (res) => {
    if (res && res.data) {
      if (!res.data.HasException) {
        const ObjectData = res.data.ObjectData;
        if (ObjectData.length > 0) {
          userInfo.value = {
            ...ObjectData[0],
            c_name:ObjectData[0].c_name?ObjectData[0].c_name:'未维护姓名',
            c_post:ObjectData[0].c_post?ObjectData[0].c_post:'未维护职位',
          };
          setErrorImg();
        } else {
          userInfo.value = {
            c_name:'未维护姓名',
            c_post:'未维护职位',
          };
        }
      } else {
        service.enjoyShowToast(res.data.Exception.Message)
      }
      service.enjoyHideLoading();
    }
    service.enjoyHideLoading();
  }, () => {
    service.enjoyHideLoading();
  });
}

onMounted((e) => {
  getListHeight();
});

onShow(async ()=>{
  await GetMyInfoList();
  await refreshRoleData();
  await getDailyData();
})

//今日统计
const getDailyData = async () => {
  uni.showLoading({ title: "查询中...", mask: true });
  const res = await mainService.request('tasktodo', 'FetchTodayTaskStatistics', {});
  if (res) {
    dailyData.value = res;
  }
  uni.hideLoading();
}

const refreshRoleData = async() => {
  await fetchTaskClassRole();
  await FetchUserRoles();
  myGroup.value = allGroup.value.filter(x=>userRole.value.find(y=>y.Code===x.c_group_code));
  canJoinGroup.value = allGroup.value.filter(x=>!myGroup.value.find(y=>y.c_group_code === x.c_group_code));
}

//任务角色
const fetchTaskClassRole = async ()=>{
  uni.showLoading({ title: "查询中...", mask: true });
  const res = await mainService.request('taskdefine', 'FetchEffectiveTaskClass', '');
  uni.hideLoading();
  if(res){
    allGroup.value = res.map(x=>{
      return{
        c_group_code: x.Code,
        c_group_title: x.Name,
        c_group_content: x.Name
      }
    })
  }
}
//当前用户的所有角色
const FetchUserRoles = async () =>{
  uni.showLoading({ title: "查询中...", mask: true });
  const res = await mainService.request('h5UserGroup', 'FetchUserRoles', loginInfo.sUser);
  uni.hideLoading();
  userRole.value = res;
}

// 退出群组
const exitGroup = async(item)=>{
  userRole.value = userRole.value.filter(x=>x.Code!=item.c_group_code);
  UpdateUserRols(userRole.value);
}

const UpdateUserRols = async (roleItems) =>{
  const req =  {
    UserNo: [loginInfo.sUser],
    RoleItems: roleItems,
    isOverwrite: true ,
  }
  uni.showLoading({ title: "处理中...", mask: true });
  const res = await mainService.request('h5UserGroup', 'UpdateUserRols', req);
  uni.hideLoading();
  await refreshRoleData();
}

// 我的工单
const goToMyCenter = () => {
  uni.navigateTo({
    url: `./myTask`
  });
}

// 能力排名
const goToAbilityRank = () => {
  uni.navigateTo({
    url: `./abilityRank`
  });
}

// 加入群组
const goToJoinGroup = () => {
  uni.navigateTo({
    url: `../joinGroup`
  });
}

</script>

<style lang="scss" scoped>
@import '../../../../main.scss';

// 用户信息
.user-view {
  width: calc(100% - 40rpx);
  height: 240rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #FFFFFF;
  margin: 20rpx;
  padding: 28rpx;

  .user-top {
    width: 100%;
    height: 120rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: $uni-font-family;
    font-style: normal;

    .user-name {
      font-size: $uni-font-size-level0;
      font-weight: $uni-font-weight-level2;
      color: $uni-text-color-primary;
      line-height: 50rpx;
      text-align: right;
    }
    .user-tag {
      width: 120rpx;
      height: 36rpx;
      background: linear-gradient( 135deg, #02B7E6 0%, #36A9F3 100%);
      border-radius: 8rpx;
      border: 1rpx solid rgba(255,255,255,0.2);
      display: flex;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      margin-right: 16rpx;

      .content-text {
        font-size: $uni-font-size-level7;
        font-weight: $uni-font-weight-level1;
        color: $uni-text-color-inverse;
        line-height: 28rpx;
        text-align: justify;
        font-family: $uni-font-family;
        font-style: normal;
      }
    }
  }
  .user-bottom {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
    font-family: $uni-font-family;
    font-weight: $uni-font-weight-level1;
    font-size: $uni-font-size-level7;
    line-height: 30rpx;
    text-align: left;
    font-style: normal;
    color: $uni-text-color-hint;

    .role-tag {
      flex: 1;
      display: flex;
      box-sizing: border-box;
      justify-content: flex-start;
      align-items: flex-end;
      flex-direction: row;

      .level-text {
        color: $uni-text-color-primary;
        margin: 0 8rpx;
      }
    }
  }
}

.main-view {
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
}

.extra-view {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level7;
  line-height: 28rpx;
  text-align: center;
  font-style: normal;
  color: $uni-text-color-hint;

  .extra-text {
    margin-right: 8rpx;
  }
}

// 今日统计
.statistics-view {
  display: flex;
  flex-direction: row;

  .statistics-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-family: $uni-font-family;
    font-style: normal;
    margin-top: 25rpx;

    .statistics-top {
      font-weight: $uni-font-weight-level3;
      font-size: 42rpx;
      color: $uni-text-color-primary;
      line-height: 49rpx;
      text-align: left;
    }

    .statistics-bottom {
      font-weight:$uni-font-weight-level1;
      font-size: $uni-font-size-level5;
      color: $uni-text-color-hint;
      line-height: 33rpx;
      text-align: left;
      margin-top: 8rpx;
    }
  }
}

// 能力评分
.score-view {
  width: 100%;
  height: 240rpx;
  background: #F9F9F8;
  border-radius: 20rpx;
  margin-top: 13rpx;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 28rpx 20rpx 16rpx 28rpx;

  .score-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    font-family: $uni-font-family;
    font-style: normal;
    text-align: left;

    .score-top {
      display: flex;
      flex-direction: column;

      .score-top-title {
        font-weight: $uni-font-weight-level1;
        font-size: $uni-font-size-level2;
        color: $uni-text-color-hint;
        line-height: 42rpx;
      }
      .score-top-detail {
        font-weight: $uni-font-weight-level3;
        font-size: 42rpx;
        color: var(--theme-color);
        line-height: 49rpx;
      }
    }

    .score-bottom {
      display: flex;
      flex-direction: row;
      margin-top: 20rpx;

      .bottom-item {
        display: flex;
        flex: 1;
        flex-direction: column;

        .bottom-item-title {
          font-weight: $uni-font-weight-level1;
          font-size: $uni-font-size-level5;
          color: $uni-text-color-hint;
          line-height: 33rpx;
          margin-bottom: 8rpx;
        }

        .bottom-item-detail {
          font-weight: $uni-font-weight-level3;
          font-size: 34rpx;
          color: $uni-text-color-primary;
          line-height: 40rpx;
        }
      }
    }
  }

  .score-line {
    width: 1rpx;
    height: 100%;
    border: 1rpx dashed #EEEEEE;
    margin-right: 28rpx;
  }
}

// 我的群组
.item-view {
  width: 100%;
  height: 113rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid $uni-line-color;

  .icon-view {
    display: flex;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20rpx;
  }
}

.content-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-family: $uni-font-family;
  font-style: normal;
  justify-content: center;
  align-items: flex-start;

  .title {
    font-weight: $uni-font-weight-level3;
    font-size: $uni-font-size-level3;
    color: $uni-text-color-primary;
    line-height: 40rpx;
  }
  .detail {
    font-weight: $uni-font-weight-level2;
    font-size: $uni-font-size-level5;
    color: $uni-text-color-hint;
    line-height: 33rpx;
  }
}

.right-view {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level7;
  color: $uni-text-color-hint;
  line-height: 28rpx;
  font-style: normal;
}

.image-min {
  width: 100%;
  height: 150rpx;
  opacity: 0.6;
  margin-top: -40rpx;
}

.no-data-text {
  text-align: center;
  color: #cccccc;
  font-size: 24rpx;
  margin-top: -10rpx;
  margin-bottom: 20rpx;
}

</style>
